<!DOCTYPE html>
<html>
    <head>
        <script type="module" src="/node_modules/@finos/perspective-viewer/dist/cdn/perspective-viewer.js"></script>
        <script type="module" src="/node_modules/@finos/perspective-viewer-d3fc/dist/cdn/perspective-viewer-d3fc.js"></script>
        <script type="module" src="/node_modules/@finos/perspective-test/load-viewer-csv.js"></script>

        <link rel="stylesheet" href="/node_modules/@finos/perspective-viewer/dist/css/pro.css" />
        <link rel="stylesheet" href="/node_modules/@fontsource/roboto-mono/400.css" />

        <style>
            perspective-viewer {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                font-family: "Roboto Mono" !important;
                --preload-fonts: "Roboto Mono:400";
            }

            perspective-viewer-datagrid::part(regular-table) {
                font-family: Arial;
            }

            perspective-viewer {
                --active--background: none;
                background-color: #2a2c2f;
                color: #cfd8dc;
                --plugin--background: #2f3136;
                --float--column-type--color: #22a0ce;
                --string--column-type--color: #ff8888;
                --d3fc-legend--text: #bbbbbb;
                --d3fc-axis-ticks--color: #bbbbbb;
                --d3fc-axis--lines: #555555;
                --d3fc-tooltip--background: #333333;
                --d3fc-tooltip--color: #cfd8dc;
                --d3fc-series: #d62728;
                --d3fc-series-1: #d62728;
                --d3fc-series-2: #9467bd;
                --d3fc-series-3: #8c564b;
                --d3fc-series-4: #e377c2;
                --d3fc-series-5: #7f7f7f;
                --d3fc-series-6: #bcbd22;
                --d3fc-series-7: #17becf;
                --d3fc-series-8: #0366d6;
                --d3fc-series-9: #ff7f0e;
                --d3fc-series-10: #2ca02c;
                --warning--color: #333;
            }
        </style>
    </head>

    <body>
        <perspective-viewer> </perspective-viewer>
    </body>
</html>
